<template>
	<view class="content">
        <u-navbar bgColor="#fff" :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="考勤明细">
        </u-navbar>

        <view class="uni-area">
            <!-- 月汇总 -->
            <view class="u-m-t-40 uni-shadow">
                <view class="u-flex u-row-between">
                    <text class="u-font-32 font-bold">{{date.kqrq}}月汇总</text>
                    <view class="u-flex u-font-28" @tap.stop="date.show=true">
                        <text class="u-m-r-10 uni-dec-color">{{date.kqrq}}</text>
                        <u-icon name="arrow-down" size="14" color="#5D6672"></u-icon>
                    </view>
                </view>
                <view class="u-m-t-38 u-flex u-row-around">
                    <view v-for="(item,index) in month" :key="index" 
                        class="u-flex u-flex-col">
                        <view>
                            <text :class="['u-font-42','font-bold',item.field=='unatdStaffs'?'uni-error-color':'']">
                                {{item.value}}
                            </text>
                            <text class="u-m-l-4 u-font-24">{{item.unit}}</text>
                        </view>
                        <text class="u-m-t-18 u-font-24 uni-dec-color">{{item.title}}</text>
                    </view>
                </view>
            </view>

            <!-- 日历 -->
            <!-- <uni-week-calendar class="u-m-t-40" @change="dateChange" /> -->

            <!-- 日历 -->
            <view class="u-m-t-30 uni-shadow" style="background:#fff">
                <uni-calendar-edit :insert="true" :showMonth="false"
                    :date="calendarDate" :selected="calendarSelected" @change="dateChange" >
                </uni-calendar-edit>
                <view class="u-m-t-20 u-flex u-row-right u-p-r-30">
                    <view class="u-m-r-20 u-flex">
                        <view class="u-m-r-10 yuan" style="background: #21A5F3;"></view>
                        <text class="u-font-24 uni-dec-color">正常出勤</text>
                    </view>
                    <view class="u-flex">
                        <view class="u-m-r-10 yuan" style="background: #ff5a5f;"></view>
                        <text class="u-font-24 uni-dec-color">考勤异常</text>
                    </view>
                </view>
            </view>

            <!-- 表格 -->
            <view class="u-m-t-40 u-m-b-30 uni-shadow">
                <view class="u-m-b-30 u-text-center u-font-32 uni-dec-color font-bold">
                    {{table.name?table.name+'的':''}}进出明细
                </view>
                <view class="uni-table">
                    <u-row class="uni-tr">
                        <u-col span="3" textAlign="center" class="u-font-28 font-bold">状态</u-col>
                        <u-col span="6" textAlign="center" class="u-font-28 font-bold">时间</u-col>
                        <u-col span="3" textAlign="center" class="u-font-28 font-bold">头像</u-col>
                    </u-row>
                    <u-row v-if="table.list.length!=0" v-for="(item,index) in table.list" :key="index" class="uni-tr">
                        <u-col span="3" textAlign="center" class="u-font-28">{{item.status==1?'进场':'离场'}}</u-col>
                        <u-col span="6" textAlign="center" class="u-font-28">{{item.kqsj}}</u-col>
                        <u-col span="3" textAlign="center" class="u-font-28 uni-higt-color" 
                            @tap="lookPhoto(item.photo)">{{item.photo?'查看':''}}
                        </u-col>
                    </u-row>
                    <u-row v-if="table.list.length==0" class="uni-tr">
                        <u-col span="12" textAlign="center" class="u-font-28">暂无进出场明细</u-col>
                    </u-row>
                </view>
            </view>
        </view>

        <!-- 年月选择器 -->
        <u-datetime-picker :show="date.show"
            mode="year-month"
            v-model="date.timestamp"
            :formatter="formatter"
            :closeOnClickOverlay="true"
            @close="date.show=false"
            @cancel="date.show=false"
            @confirm="confirm">
        </u-datetime-picker>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bzid: null, // 班组id
                rybh: null, // 人员编号(id)
                date:{
                    show: false,
                    timestamp: this.$tools.formatTime(new Date()).ym, // 年月时间戳
                    kqrq: this.$tools.formatTime(new Date()).ym, // 年月日
                    date: this.$tools.formatTime(new Date()).ymd, // 日期
                },
                month:[
                    { field:'day', title:'应出勤', value: 0, unit:'天' },
                    { field:'atdStaffs', title:'实际出勤', value: 0, unit:'天' },
                    { field:'unatdStaffs', title:'考勤异常', value: 0, unit:'天' },
                    { field:'workHours', title:'合计工时', value: 0, unit:'小时' },
                ],
                // 日历数据
                calendarDate: this.$tools.formatTime(new Date()).ymd,
                calendarSelected:[
                    // { date: '2022-01-12', type:'1', info: '签到'  }, // 1:正常 0:异常
                ],
                // 进出场明细
                table:{
                    name:'',
                    list:[],
                    // { status: 1, kqsj:'2021-06-05 08:10:00', photo:'' },
                },
			}
		},

		onLoad(option) {
            this.bzid = option.bzid
            this.rybh = option.rybh
            // 月汇总
            this.getKqMemberMonth()
            // 日历
            this.getKqMemberDay()
            // 进出场明细
            this.getKqMemberTurnover()
		},

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 年月选择器过滤函数
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                return value
            },

            
            // 人员考勤月汇总
            getKqMemberMonth(){
                uni.showLoading({ title:'人员考勤月汇总' })
                const parameter = {
                    bzid: this.bzid,
                    rybh: this.rybh,
                    date: this.date.kqrq
                }
                // console.log('月汇总参数',parameter)
                this.$request( this,this.$apis.kqMemberMonth,parameter ).then(res=>{
                    // console.log('考勤概览-月汇总',res)
                    this.month.map((v,i)=>{
                        v.value = res[v.field]
                    })
                }).then()
            },

            // 考勤明细(日历)
            getKqMemberDay(){
                uni.showLoading({ title:'考勤明细加载中' })
                const parameter = {
                    rybh: this.rybh,
                    kqrq: this.date.kqrq+'-01' // 后期这里凭借的部分可以去掉
                }
                // console.log('考勤明细-参数',parameter)
                this.$request( this,this.$apis.kqMemberDay,parameter ).then(res=>{
                    // console.log('考勤明细-日历',res)
                    res.map((v,i)=>{ // v.state状态（0:缺勤 1:异常 2:正常 3:未到时间）
                        if( v.state != 3 ){
                            this.calendarSelected.push({
                                date: v.date,
                                type: v.state == 0 || v.state == 1 ? 0 : 1   // 1:正常 0:异常
                            })
                        }
                    })
                }).then()
            },

            // 进出场明细
            getKqMemberTurnover(){
                uni.showLoading({ title:'进出场明细' })
                const parameter = {
                    rybh: this.rybh,
                    kqsj: this.date.date
                }
                // console.log('进出场明细-参数',parameter)
                this.$request( this,this.$apis.kqMemberTurnover,parameter ).then(res=>{
                    // console.log('进出场明细',res)
                    if( res.length != 0 ){
                        this.table.name = res[0].xm
                        this.table.list = res
                    }
                }).then()
            },

            // 选择年月
            confirm(e){
                this.date.show = false,
                this.date.timestamp = e.value,
                this.date.kqrq = this.$tools.formatTime(new Date(e.value)).ym,
                // 月汇总
                this.getKqMemberMonth()
                // 日历数据
                this.calendarDate = this.$tools.formatTime(new Date(e.value)).ymd
                this.getKqMemberDay()
                // 进出场数据
                this.date.date = this.$tools.formatTime(new Date(e.value)).ymd
                this.getKqMemberTurnover()
            },

            // 日期改变
            dateChange(e){
                this.date.date = e.fulldate
                // 进出场数据
                this.getKqMemberTurnover()
            },

            // 查看头像
            lookPhoto(photo){
                uni.setStorageSync('accessoryData', JSON.stringify( [ {type:'png',url:photo} ] ) )
                uni.navigateTo({ url: '/pages/common/accessory-detail' })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        // 日历
        .yuan{
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            opacity: 1;
        }

        .uni-table{
            border: 1rpx solid #eee;
            .uni-tr{
                height: 80rpx;
                &:nth-child(odd){
                    background: #F6F7F8;
                }
                &:nth-child(even){
                    background: #fff;
                }
            }
        }
    }
</style>
